<template>
    <div class="w-full h-full flex items-center bg-gradient-to-r from-blue-400 to-blue-300 px-6 shadow justify-between">
        <!-- 左侧预留（可放LOGO）
        <div class="flex-1 flex items-center"></div> -->
        <!-- 中间标题 -->
        <div class="flex justify-center items-center">
            <span class="text-xl font-bold text-white tracking-wide">Cookies 后台管理</span>
        </div>
        <!-- 右侧头像及下拉 -->
        <div class="flex justify-end items-center">

            <el-dropdown>
                <span class="el-dropdown-link flex items-center cursor-pointer">
                    <el-avatar :size="40"
                        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.xzfpkJdhfQ8AEGsz6fxe2QAAAA?rs=1&pid=ImgDetMain" />
                    <span class="ml-2 mr-3 text-white font-medium">Cookies</span>
                </span>

                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>更改信息</el-dropdown-item>
                        <el-dropdown-item>注册账号</el-dropdown-item>
                        <el-dropdown-item divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
</template>

<script setup lang="ts">
// 无需更改
</script>

<style scoped>
/* 可根据需要自定义样式 */
</style>